<script>
//编辑组件页面
import TemplateAppCard from '../../card/TemplateAppCard';
import * as types from '@/store/types';
import * as utils from '@/utils/helps';
import WorkSpaceQuery from '@/mixins/WorkspaceQuery';

export default {
  name: 'AppCardEdit',
  components: {
    TemplateAppCard,
  },
  mixins: [WorkSpaceQuery],
  data() {
    return {
      isInitialized: false,
    };
  },
  computed: {
    allControl() {
      return this.$store.getters.controls;
    },
    controls() {
      if (Object.keys(this.allControl).length !== 0) {
        if (this.$store.getters.currentId === '') {
          this.$store.commit(types.UPDATA_APPLY_CURRENTID, this.$router.history.current.params.id);
          return this.allControl[this.$router.history.current.params.id];
        } else {
          return this.allControl[this.$store.getters.currentId];
        }
      } else {
        return {
          appearance: {
            type: '',
          },
        };
      }
    },
    appData() {
      return this.$store.state.app.appData;
    },
  },
  watch: {
    controls(newVal) {
      if (newVal.options.data) {
        this.initControl(newVal);
      }
    },
  },
  beforeMount() {
    if (Object.keys(this.allControl).length === 0) {
      this.getLastAppData();
    } else {
      const controlData = this.allControl[this.$store.getters.currentId];
      this.initControl(controlData);
    }
  },
  mounted() {
    this.$nextTick(() => {
      window.dispatchEvent(new Event('resize'));
    });
  },
  methods: {
    initControl(newVal) {
      if (!this.isInitialized) {
        this.isInitialized = true;
      }
    },
    gotoCard() {
      this.$router.push('/workspace/' + this.appData.id);
    },
    //保存应用
    saveCard() {
      this.upDataAppConfig(
        {
          path: `${window.location.origin}/workspace/${this.appData.id}`,
          info: JSON.stringify(this.allControl),
        },
        {
          id: this.appData.id,
        }
      );
    },
    //提交store
    updataChartConfig() {},
  },
};
</script>
<template>
  <div class="app-card-wrapper">
    <Layout>
      <Header>
        <Row>
          <Col span="2">
          <Button
            type="text"
            title="返回"
            @click="gotoCard">
            <Icon
              type="arrow-left-a"
              size="36"
              color="#ffffff"></Icon>
          </Button>
          </Col>
          <Col span="4">
          <h1 style="color:white">编辑应用</h1>
          </Col>
          <Col span="16">
          <div style="width:100%"></div>
          </Col>
          <Col
            span="2"
            style="float:right">
          <Button
            type="text"
            title="保存"
            @click="saveCard">
            <Icon
              type="document"
              size="36"
              color="#ffffff"></Icon>
          </Button>
          <Dropdown
            transfer
            trigger="click">
            <Button
              type="text"
              title="导出">
              <Icon
                type="android-more-vertical"
                size="36"
                color="#ffffff"></Icon>
            </Button>
            <DropdownMenu slot="list">
              <DropdownItem name="exportComponent">导出组件</DropdownItem>
              <DropdownItem name="exportConfig">导出配置</DropdownItem>
            </DropdownMenu>
          </Dropdown>
          </Col>
        </Row>
      </Header>
      <Layout>
        <div class="template-app-wrapper">
          <TemplateAppCard
            :all-options="controls.options"
            mode="edit">
          </TemplateAppCard>
        </div>
  </layout></layout></div></Layout>
    </Layout>
  </div>
</template>

<style lang="less">
.app-card-wrapper {
  height: 100vh;
  .template-app-wrapper {
    height: calc(~'100vh - 65px');
  }
}
</style>
